<template>
	<view class="page-wrapper">
		<div class="title" :style="'height:' + (navH - 15) + 'px'"  >
			<div class="position" @click='showSelectRegion'>
				<image src="../../static/img/public/position.png" mode="widthFix"></image>
				<p v-text="(nowRegion.county !== '' && nowRegion.county !== '全部') ? nowRegion.county : nowRegion.city !== '' ? nowRegion.city : nowRegion.province !== '' ? nowRegion.province : '选择区域'"></p>
			</div>
		</div>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" interval="5000" duration="500">
			<swiper-item>
				<div class="swiper-image-wrapper">
					<image class="swiper-image" :src="nowRegion.cover?'https://www.jiajiedaojia.com/'+nowRegion.cover:'https://www.jiajiedaojia.com/info/banner.png'" mode="widthFix"></image>
				</div>
			</swiper-item>
		</swiper>
		<div class="content">
			<!-- <image class="content-bg" src="../../static/img/index/content-bg.png" mode="widthFix"></image>
			<div class="content-title"> -->
			<!-- 	<div class="content-t-l">
					<image src="../../static/img/index/logo.png" mode="widthFix"></image>
					<span>
						<p>极致 /专业 </p>
						<span></span>
						<p> 诚信/ 舒适</p>
					</span>
				</div>
				<div class="content-t-r">
					<image src="../../static/img/index/top-right.png" mode="widthFix"></image>
				</div>
			</div> -->
			<div style="padding-top: 20rpx;">
				 <div class="cate_list">
					<div v-for="(item , index) in cateList" :class="'cate_item '  + (cate_id == item.id ? 'active' : '')" :key='index' @click="changeCate(item.id)">{{item.name}}</div>
				</div>	
			</div>
			
		  
				 <div class="goods_list" v-if="goodsList.length != 0">
					<div class="good_item" v-for="(item , index) in goodsList"   @click='getGoodsInfo(item)'>
						 <div  :style="{height: '100px' , width: '100%' , backgroundImage: `url(${item.goods_cover ? 'https://api.jiajiedaojia.com' + item.goods_cover: 'https://img2.baidu.com/it/u=2691385811,1259412453&fm=253&fmt=auto&app=138&f=JPEG?w=575&h=500'})`,backgroundSize: 'contain'}"></div>
						  <div style="font-size: 26rpx;font-weight: bold;margin-top: 20rpx;">{{item.goods_name}}</div>
						<div style="text-align: right;color:blue">￥{{item.sale_price}}/{{item.total_count}}次</div>
					 </div>
				 </div>	
				  <hEmpty v-else center="暂无产品" img="../../static/img/public/order-empty.png"></hEmpty>
			
			
			
			<!-- <div class="hot">
				<div class="hot-title">
					<h3>其它项目</h3>
					<span>更多</span>
				</div>
				<div class="hot-content">
					<ul>
						<li v-for="item in hotList" :key="item.id">
							<image :src="item.avatar" mode="widthFix"></image>
							<div>
								<h3 v-text="item.name"></h3>
								<p v-text="item.info"></p>
								<span>{{item.price + '/' + item.unit}}</span>
							</div>
						</li>
					</ul>
				</div>
			</div> -->
		</div>
		
		
		
		
		<!-- 选择区域 -->
		<drawer title="区域选择" height="60%" ref="selectRegion">
			<ul class="select-region">
				<li  v-for="item in regionList" :key="item.id" :class="nowRegion.id === item.id ? 'active' : ''" @click="selectRegionHandler(item)">
					<p v-text=" item.city + '' + item.county"></p>
				</li>
			</ul>
		</drawer>
	</view>
</template>

<script>
	import {api} from '@/util/api.js';
	
	export default {
		data() {
			return {
				navH: 0,
				regionList: [],
				nowRegion: null,
				hotList: [
					{ id: 1, avatar: '../../static/img/index/hot1.png', name: '夜间日式保洁', info: '单次两个小时日式保洁', price: 129, unit: '次' },
					{ id: 2, avatar: '../../static/img/index/hot2.png', name: '收纳规划服务', info: '专业的收纳4个小时，制定合理的收纳方案', price: 200, unit: '次' }
				],
				cleanKeepingIsOpen: true,	//保洁
				cleanUpIsOpen: true ,//整理
				cleanTidyIsOpen: true, //整洁
				cateList: [],
				cate_id: 0,
				goodsList: []
			}
		},
		methods: {
			getGoodsInfo(item) {
				console.log(item , 'item')
				api.getGoodsInfo({ goods_id:  item.goods_id }, res => {
					this.product = res.data;
					// if (res.data.increment.length == 0) {
						//如果没有规格正常走
							return uni.navigateTo({
								url: `/pages/index/confirmOrder/confirmOrder?type=${item.goods_type}&&goods_id=` + res.data.goods_id
							});
					// }
					// this.selectIncrement();
				});
			},
			changeCate(id){
				this.cate_id = id;
				this.getGoods()	
			},
			getCateList(){
				const id = getApp().globalData.nowRegion != null ? getApp().globalData.nowRegion.id : ''
				 api.getCateList({ region_id: id} , res =>{
					 if(res.code === 200) {
						 this.cateList = res.data 
					 }
				 })
			},
			getGoods(){
				const id = getApp().globalData.nowRegion != null ? getApp().globalData.nowRegion.id : ''
				 api.getGoodsList({ region_id: id , category_id : this.cate_id} , res =>{
					 if(res.code === 200) {
						 this.goodsList= res.data.data 
					 }
				 })	
			},
			goCleanKeeping() {
				if(getApp().isOpen(1)) {
					uni.navigateTo({
						url: 'cleanKeeping/cleanKeeping'
					})
				} else {
					uni.showToast({
						title: '该地区暂未开通此服务',
						mask: 'true',
						icon: 'none'
					})
				}
			},
			goCleanUp() {
				if(getApp().isOpen(2)) {
					uni.navigateTo({
						url: 'cleanUp/cleanUp'
					})
				} else {
					uni.showToast({
						title: '该地区暂未开通此服务',
						mask: 'true',
						icon: 'none'
					})
				}
			},
			gomajor() {
				// if(getApp().isOpen(2)) {
					uni.navigateTo({
						url: '/pages/index/major/major'
					})
				// } else {
				// 	uni.showToast({
				// 		title: '该地区暂未开通此服务',
				// 		mask: 'true',
				// 		icon: 'none'
				// 	})
				// }
			},
			goCleanTidy() {
				if(getApp().isOpen(3)) {
					uni.navigateTo({
						url: 'cleanTidy/cleanTidy'
					})
				} else {
					uni.showToast({
						title: '该地区暂未开通此服务',
						mask: 'true',
						icon: 'none'
					})
				}
			},
			showSelectRegion() {
				this.$refs.selectRegion.open();
			},
			initModuleOpen() {
				this.cleanKeepingIsOpen = getApp().isOpen(1);
				this.cleanUpIsOpen = getApp().isOpen(2);
				this.cleanTidyIsOpen = getApp().isOpen(3);
			},
			selectRegionHandler(payload) {
				this.nowRegion = payload;
				getApp().globalData.nowRegion = payload;
				this.initModuleOpen();
				this.$refs.selectRegion.hide();
				if(uni.getStorageSync('loginStatus') == 200) {
					api.updateNowRegion({
						region_id: payload.id
					}, res => { 
						if(res.code === 200) {
							this.initModuleOpen();
							this.$refs.selectRegion.hide();
						}
					})	
				}
					this.getCateList()
					this.getGoods()
				} 
			
			
		},
		onLoad() {
			this.navH = getApp().globalData.navHeight;
			
		},
		onShow() {
			let app = getApp();
			uni.showLoading({
				mask: 'true'
			});
			if(app.globalData.loginStatus !== 1) {
				app.login().then((res)=>{
					if(app.globalData.nowRegion !== null) {
						this.regionList = app.globalData.regionList;
						this.nowRegion = app.globalData.nowRegion;
						uni.hideLoading();
						this.initModuleOpen()
						this.getCateList()
						this.getGoods()
					} else {
						this.regionList = app.globalData.regionList;
						this.showSelectRegion();
						uni.hideLoading();
							this.initModuleOpen()
					}
				})
			} else {
				if(app.globalData.nowRegion !== null) {
					this.regionList = app.globalData.regionList;
					this.nowRegion = app.globalData.nowRegion;
					uni.hideLoading();
						this.initModuleOpen()
						this.getCateList()
						this.getGoods()
				} else {
					this.regionList = app.globalData.regionList;
					this.showSelectRegion();
					uni.hideLoading();
						this.initModuleOpen()
				}
			}
			
		}
		
	}
</script>

<style scoped>
	.page-wrapper {
		box-sizing: border-box;
		
	}
	.title {
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		align-items: flex-end;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.position {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.position>image {
		width: 25.5rpx;
	}
	.position>p {
		font-size: 22rpx;
		margin-left: 10rpx;
	}
	
	.select-region {
		height: 100%;
		width: 100%;
		overflow: auto;
	}
	.select-region>li {
		text-align: center;
		box-sizing: border-box;
		padding: 40rpx;
		border-bottom: 2rpx solid #eee
	}
	.select-region>li.active {
		background-color: #eeeeee;
	}
	
	
	
	.swiper {
		width: 100%;
		height: 470rpx;
		background-color: #eeeeee;
		/* position: absolute;
		top: 0;
		left: 0;
		z-index: -2; */
	}
	.swiper>swiper-item {
		width: 100%;
	}
	.swiper-image-wrapper {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	.swiper-image {
		width: 100%;
	}
	.content {
		width: 100%;
		background-color: #f4f4f4;
		border-radius: 33rpx 33rpx 0 0;
		transform: translateY(-60rpx);
		position: relative
	}
	.content-bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	
	.content-title {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.content-t-l {
		
	}
	.content-t-l>image {
		width: 90rpx;
	}
	.content-t-l>span {
		display: flex;
		align-items: auto;
		font-size: 30rpx;
		color: #333333;
		margin-top: 24rpx;
		
	}
	.content-t-l>span>p:nth-child(1) {
		margin-right: 10rpx;
	}
	.content-t-l>span>span:nth-child(2) {
		background-color: #0989F8;
		height: 6rpx;
		width: 6rpx;
		border-radius: 50%;
		align-self: flex-end;
		margin-bottom: 6rpx;
	}
	.content-t-l>span>p:nth-child(3) {
		margin-left: 10rpx;
	}
	
	.content-t-r {
		
	}
	.content-t-r>image {
		width: 74rpx;
	}
	
	
	.content-center {
		width: 100%;
		height: 459rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		align-items: auto;
		justify-content: space-between;
	}
	
	.content-c-l {
		width: calc(50% - 10rpx);
		height: 100%;
		background-color: #ffffff;
		border-radius: 23rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
	}
	.content-c-l>div {
		width: 100%;
		box-sizing: border-box;
		padding: 60rpx 0 0 60rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.content-c-l>div>h3 {
		font-size: 34rpx;
		position: relative;
		display: inline;
	}
	.content-c-l>div>h3>span {
		position: absolute;
		height: 22rpx;
		line-height: 22rpx;
		width: 74rpx;
		text-align: center;
		background-image: linear-gradient(to right, #FD7000 , #FE5000);
		font-size: 14rpx;
		color: #ffffff;
		border-radius: 12rpx 8rpx 10rpx 0;
		bottom: 90%;
		left: 90%
	}
	
	.content-c-l>div>p {
		color: #0086FB;
		font-size: 24rpx;
		margin-top:20rpx
	}
	.content-c-l>div>button {
		width: 116rpx;
		height: 33rpx;
		color: #FE5100;
		border: 2rpx solid #FE5000;
		font-size: 16rpx;
		background-color: #ffffff;
		border-radius: 4rpx;
		padding: 0;
		text-align: center;
		margin: 0;
		margin-top:20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.content-c-l>image {
		width: 100%;
	}
	
	.content-c-r {
		width: calc(50% - 10rpx);
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	
	.content-c-r>div {
		width: 100%;
		height: calc(50% - 10rpx);
		border-radius: 14rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
	}
	.content-c-r>div>div {
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 0 0 60rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.content-c-r>div>div>h3 {
		font-size: 34rpx;
		position: relative;
		display: inline;
	}
	.content-c-r>div>div>h3>span {
		position: absolute;
		height: 33rpx;
		line-height: 33rpx;
		width: 66rpx;
		text-align: center;
		background-image: linear-gradient(to right, #FD7000 , #FE5000);
		font-size: 14rpx;
		color: #ffffff;
		border-radius: 18rpx 0rpx 18rpx 0;
		bottom: 10rpx;
		left: 100%
		/* position: absolute;
		height: 22rpx;
		line-height: 22rpx;
		width: 74rpx;
		text-align: center;
		background-image: linear-gradient(to right, #FD7000 , #FE5000);
		font-size: 14rpx;
		color: #ffffff;
		border-radius: 12rpx 8rpx 10rpx 0;
		bottom: 90%;
		left: 90% */
	}
	.content-c-r>div>div>p {
		color: #0086FB;
		font-size: 24rpx;
		margin-top:20rpx
	}
	
	.content-c-r>div>image {
		width: 100%;
	}
	
	.hot {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
	}
	
	.hot-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.hot-title>h3 {
		font-size: 30rpx;
		color: #333333;
	}
	.hot-title>span {
		font-size: 20rpx;
		color: #999999;
	}
	
	
	.hot-content {
		width: 100%;
		overflow: hidden;
	}
	.hot-content>ul {
		font-size: 0;
		margin-right: -20rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	.hot-content>ul>li {
		width: calc(50% - 20rpx);
		box-sizing: border-box;
		padding: 10rpx;
		background-color: #ffffff;
		display: inline-block;
		margin-right: 20rpx;
		margin-top: 20rpx
	}
	.hot-content>ul>li>image {
		width: 100%;
	}
	.hot-content>ul>li>div {
		width: 100%;
		margin-top: 10rpx
	}
	.hot-content>ul>li>div>h3 {
		font-size: 24rpx;
		color: #333333;
		width: 100%;
		height: 30rpx;
		line-height: 30rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.hot-content>ul>li>div>p {
		font-size: 20rpx;
		color: #999999;
		margin-top: 10rpx;
		height: 60rpx;
		width: 100%;
		/* 超出省略 */
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.hot-content>ul>li>div>span {
		font-size: 26rpx;
		color: #FE5A00;
		width: 100%;
		display: inline-block;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}
	.select-region{font-size: 24rpx;}
	.select-region>li{
		text-align:left;
	}
	.cate_list {
		padding: 30rpx 30rpx 60rpx;
		width: 100%;
		overflow: auto;
		display: flex;	
		gap: 24rpx;
		text-align: center;
		align-items: center;
		padding: 16rpx;
	    word-break: keep-all;
		border-bottom: 2rpx solid #f9f9f9;
		box-sizing: border-box;
	}
	.cate_item{
		padding: 6rpx 30rpx;
		background-color: #fff;
		border-radius: 30rpx;
	}
	
	.active{
	   background-color: #0086FB;
	   color: #ffffff ;
	}
	
	.goods_list{
		display: flex;
		 justify-content: space-between;
		flex-wrap: wrap;
		gap: 20rpx;
		padding: 30rpx;
	}
	.good_item{
		margin-top: 20rpx;
		width: 47%;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		background: #ffffff;
		border-radius: 20rpx;
		
		
	}

	
	
</style>
